<!-- 字典数据 -->
<template>
  <div class="app-container drawer-container">
    <div class="block">
      <el-form
        ref="formRef"
        :model="form"
        :inline="true"
        size="default"
        label-width="100"
        label-position="left"
        :rules="rules"
        class="mt-[15px]"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="节假日名称" prop="name1">
              <el-input
                v-model="form.name1"
                placeholder="请输入"
                clearable
                maxlength="50"
                show-word-limit
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="选择日期" prop="name2">
              <el-date-picker
                v-model="form.name2"
                type="date"
                placeholder="请选择日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="name3">
              <el-input
                v-model="form.name3"
                placeholder="请输入"
                clearable
                maxlength="50"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="footer pb-[15px] mt-[-20px] pr-[15px]">
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
      <el-button @click="closeDialog">取 消</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "DictData",
  inheritAttrs: false,
});
import config_dialog from "./config.vue";
const props = defineProps({
  typeCode: {
    type: String,
    default: () => {
      return "";
    },
  },
  typeName: {
    type: String,
    default: () => {
      return "";
    },
  },
});
const dialogCopy = reactive({
  visible: false,
  title: "",
});
const dialogConfig = reactive({
  visible: false,
  title: "",
});
const formRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const loading = ref(false);
const form = reactive({
  name1: "",
  name2: "",
  name3: "",
});

const rules = reactive({
  name1: [{ required: true, message: "请输入", trigger: "blur" }],
  name2: [{ required: true, message: "请输入", trigger: "blur" }],
  name3: [{ required: true, message: "请输入", trigger: "blur" }],
});

const tableData = ref([
  {
    name1: "name1",
    name2: "name2",
    name3: "name3",
  },
]);

// 配置内容 弹框
function f_OpenConfigDialog() {
  dialogConfig.visible = true;
}

// 配置复制 弹框
function f_OpenCopyDialog() {
  dialogCopy.visible = true;
}

/** 字典表单提交 */
function handleSubmit() {
  dataFormRef.value.validate((isValid: boolean) => {
    if (isValid) {
      loading.value = false;
      const dictId = formData.id;
      if (dictId) {
        DictAPI.updateDict(dictId, formData)
          .then(() => {
            ElMessage.success("修改成功");
            closeDialog();
            handleResetQuery();
          })
          .finally(() => (loading.value = false));
      } else {
        DictAPI.addDict(formData)
          .then(() => {
            ElMessage.success("新增成功");
            closeDialog();
            handleResetQuery();
          })
          .finally(() => (loading.value = false));
      }
    }
  });
}

/** 关闭弹窗 */
function f_CloseDialog() {
  dialogCopy.visible = false;
  dialogConfig.visible = false;
}

onMounted(() => {});
</script>
<style lang="scss" scoped>
.drawer-container {
  background: transparent;

  .block {
    padding: 15px;
    margin-bottom: 20px;
    background: #fff;

    .title {
      padding-bottom: 10px;
      margin-bottom: 20px;
      font-size: 14px;
      font-weight: bold;
      border-bottom: 1px dashed #eee;
    }

    :deep .el-form {
      .el-form-item {
        width: 100%;

        .el-form-item__label {
          font-size: 12px !important;
        }

        .el-date-editor.el-input {
          width: 100%;
        }
      }
    }
  }
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px;
  text-align: center;
  background: #fff;
  border-top: 1px dashed #eee;

  button {
    width: 160px !important;
    height: 28px !important;
    margin-right: 40px;
    margin-left: 40px;
    border-radius: 15px;

    > span > svg {
      margin-right: 6px;
    }
  }
}
</style>
